<template>
    <div>
        <el-dialog :title="isAdd ? '添加商品规格' : '修改商品规格'" :visible.sync="zhe" :before-close="close">
            <el-form ref="form" :model="form" label-width="80px" :rules="rules">

                <el-form-item label="规格名称" prop="specsname">
                    <el-input v-model="form.specsname"></el-input>
                </el-form-item>


                <el-form-item label="规格属性" v-for="(item, index) in specsArr" :key="item.val">
                    <!-- attrs -->
                    <el-input v-model="item.value" class="inp1"></el-input>
                    <el-button type="primary" @click="addgui" v-if="index == 0">新增规格属性</el-button>
                    <el-button v-else @click="delgui(index)" class="del">删除</el-button>
                </el-form-item>

                <el-form-item label="状态">
                    <el-switch v-model="form.status" :active-value="1" :inactive-value="2"></el-switch>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submit">确定</el-button>
                    <el-button @click="close">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
//引入接口
import { specsadd,specsinfo,specsedit} from "../../request/api"
export default {
    data() {
        return {
            // 定义数据
            form: {
                specsname: "",
                status: 2,
                attrs: ""
            },
            // 正则验证
            rules: {
                specsname: [
                    { required: true, message: '请输入规格名称', trigger: 'blur' },
                    { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
                ],
            },
            // 商品规格数组
            specsArr: [{
                value: ''
            }]
        }
    },
    props: ["zhe", "isAdd"],
    methods: {
        //添加角色
        submit() {
            //在提交之前需要把数组转成字符串
            this.form.attrs = this.specsArr.map(item => item.value)
            this.form.attrs = this.form.attrs.join(",")

            if (this.isAdd) {
                // console.log(this.form);
                specsadd(this.form).then(res => {
                    // console.log(res);
                    if (res.code == 200) {
                        this.$message(res.msg);
                        this.$refs.form.validate()
                        this.close()
                        this.$store.dispatch("specs/getSpecsListAction")
                        this.$store.dispatch("specs/getCountAction")

                    }
                })
            } else {
                specsedit(this.form).then(res => {
                    // console.log(res);
                    if (res.code == 200) {
                        this.$message(res.msg);
                        this.$refs.form.validate()
                        this.close()
                        this.$store.dispatch("specs/getSpecsListAction")
                    }
                })


            }


        },
        // 关闭
        close() {
            this.$emit("close")
            this.reset()

        },
        // 重置
        reset() {
            this.$refs.form.resetFields()
            this.specsArr = [{ value: "" }]

        },
        // 获取单条数据
        lookup(id) {
            console.log(id);
            specsinfo({id}).then(res=>{
                console.log(res);
                this.form = res.list[0]
                this.form.attrs.map((item,index)=>{
                    if(index==0){
                        this.specsArr[0].value = item
                    }else{
                        this.specsArr.push({value:item})
                    }
                })
            })
            

        },
        //添加规格
        addgui() {
            this.specsArr.push({ value: "" })

        },
        delgui(index) {

            this.specsArr.splice(index, 1)
        }

    },
    mounted() {


    },

    watch: {},
    computed: {},
    filters: {},
    components: {}
}
</script>
<style scoped>
.inp1 {
    width: 359px;
}

.del {
    margin-left: 10px;
}
</style>
